<script setup lang="ts">
import '../../assets/iconfont/iconfont.css'
import {type IconProps} from './type'

const props = defineProps<IconProps>()
</script>

<template>
  <div class="icon-component user-select-none">
    <span v-if="props.number"
          :style="[{'font-size': props.fontSize?props.fontSize:'x-large'},{'color': props.color}]"
          class="icon-component-number">
          {{ props.number }}
    </span>
    <span v-if="props.iconType"
          :class="{[`icon-${props.iconType}`]: props.iconType}"
          :style="[{'font-size':  props.fontSize?props.fontSize:'x-large'},{'color': props.color}]"
          class="iconfont icon-component-origin">
      <span v-if="props.insideIcon"
            class="icon-component-inside"
            :style="[{'font-size': props.insideFontSize?props.insideFontSize:'x-large'},{'color': props.insideColor}]">
        <slot name="inside"></slot>
      </span>
    </span>
    <span v-if="props.isDesc"
          :class="props.isDesc? 'exist':''"
          class="icon-component-description col-12">
        <slot name="description"></slot>
    </span>
  </div>
</template>
<style scoped>
.icon-component {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.icon-component-number {
  position: relative;
}

.icon-component-origin {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
}

.icon-component-inside {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  left: calc(50% - 20px);
}

.icon-component-description {
  position: relative;
  display: flex;
  left: 4px;
}

.icon-component-description.exist {
  position: relative;
}
</style>
